<template>
  <div>
    <Header></Header>
    <section>
      <Routers></Routers>
      <div id="section" class="main">
        <div class="common_header">
          <span class="common_header_tip">人员管理</span>
          <div>
            <!--<select class="common_header_select">-->
              <!--<option value="1">111</option>-->
              <!--<option value="2">222</option>-->
              <!--<option value="3">333</option>-->
            <!--</select>-->
            <button class="common_header_btn" @click="add">添加</button>
            <button class="common_header_btn" @click="imports">批量导入</button>
            <button class="common_header_btn" @click="batchDel">批量删除</button>
          </div>
        </div>

        <table class="common_table" cellspacing="0" cellpadding="0">
          <thead>
            <tr>
              <th><input type="checkbox" v-model='checked' @click='checkedAll'></th>
              <th>姓名</th>
              <th>性别</th>
              <th>出生年月</th>
              <th>员工类型</th>
              <th>学历</th>
              <th>职称</th>
              <th>入职时间</th>
              <th>科技人员</th>
              <th>留学归国</th>
              <th>千人计划</th>
              <th>外籍人员</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
          <tr v-for="(item ,index) in peopleLIST" :key="index">
            <td><input type="checkbox" v-model='checkList' :value='item.id'></td>
            <td><span>{{item.staff_name}}</span><span class="weiman" v-if="item.status==0">未满</span></td>
            <td><span>{{item.staff_sex==0?'男':'女'}}</span></td>
            <td><span>{{item.staff_birth}}</span></td>
            <td><span>{{item.staff_type}}</span></td>
            <td><span>{{item.staff_diploma}}</span></td>
            <td><span>{{item.staff_title}}</span></td>
            <td><span>{{item.work_time}}</span></td>
            <td><span>{{item.is_tec==0?'否':'是'}}</span></td>
            <td><span>{{item.is_back==0?'否':'是'}}</span></td>
            <td><span>{{item.is_thou==0?'否':'是'}}</span></td>
            <td><span>{{item.is_fore==0?'否':'是'}}</span></td>
            <td class="operation_td">
              <span class="common_table_editBTN" @click="edit(item.id)">编辑</span>
              <span class="common_table_delBTN" @click="del(item.id)">删除</span>
            </td>
          </tr>
          </tbody>
        </table>

        <!--添加的弹框-->
        <div class="tankuang_box" v-if="propleIS_add">
          <!--里面的白色盒子（需要自己设置宽高）-->
          <div class="add_tankuang">
            <!--顶部的文字和叉叉（通用）-->
            <div class="add_tankuang_header">
              <span>{{tankuang_title}}</span>
              <i class="iconfont icon-guanbi" @click="closeAddBox"></i>
            </div>
            <div class="add_tankuang_content">
              <div class="add_tankuang_content_box">
                <!--这里的内容是根据需要的内容加入（不通用）-->
                <ul class="common_tankuang_content">
                  <li>
                    <span>姓名：</span>
                    <input type="text" v-model="name">
                  </li>
                  <li>
                    <span>性别：</span>
                    <ul class="radioBOX">
                      <li @click="toggle_sex_radio">
                        <i class="inlineBlockIcon radio" :class="{active:sex_radio}"></i>
                        <span>男</span>
                      </li>
                      <li @click="toggle_sex_radio">
                        <i class="inlineBlockIcon radio" :class="{active:!sex_radio}"></i>
                        <span>女</span>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <span>出生年月：</span>
                    <!--<input type="text" v-model="birth">-->
                    <vue-datepicker-local v-model="birth" format="YYYY-MM" class="datepicker"/>
                  </li>
                  <li>
                    <span>员工类型：</span>
                    <select v-model="type">
                      <option value="在职人员">在职人员</option>
                      <option value="兼职人员">兼职人员</option>
                      <option value="临时聘用人员">临时聘用人员</option>
                    </select>
                  </li>
                  <li>
                    <span>学历：</span>
                    <select v-model="xueli">
                      <option value="博士">博士</option>
                      <option value="硕士">硕士</option>
                      <option value="本科">本科</option>
                      <option value="大专及以下">大专及以下</option>
                    </select>
                  </li>
                  <li>
                    <span>职称：</span>
                    <select v-model="zhicheng">
                      <option value="高级">高级</option>
                      <option value="中级">中级</option>
                      <option value="初级">初级</option>
                      <option value="高级技工">高级技工</option>
                      <option value="其他">其他</option>
                    </select>
                  </li>
                  <li>
                    <span>入职时间：</span>
                    <!--<input type="text" v-model="time">-->
                    <vue-datepicker-local v-model="time" format="YYYY-MM-DD" class="datepicker"/>
                  </li>
                  <li>
                    <span>科技人员：</span>
                    <ul class="radioBOX">
                      <li @click="toggle_keji_radio">
                        <i class="inlineBlockIcon radio" :class="{active:keji_radio}"></i>
                        <span>是</span>
                      </li>
                      <li @click="toggle_keji_radio">
                        <i class="inlineBlockIcon radio" :class="{active:!keji_radio}"></i>
                        <span>否</span>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <span>外籍人员：</span>
                    <ul class="radioBOX">
                      <li @click="toggle_waiji_radio">
                        <i class="inlineBlockIcon radio" :class="{active:waiji_radio}"></i>
                        <span>是</span>
                      </li>
                      <li @click="toggle_waiji_radio">
                        <i class="inlineBlockIcon radio" :class="{active:!waiji_radio}"></i>
                        <span>否</span>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <span>千人计划：</span>
                    <ul class="radioBOX">
                      <li @click="toggle_qianren_radio">
                        <i class="inlineBlockIcon radio" :class="{active:qianren_radio}"></i>
                        <span>是</span>
                      </li>
                      <li @click="toggle_qianren_radio">
                        <i class="inlineBlockIcon radio" :class="{active:!qianren_radio}"></i>
                        <span>否</span>
                      </li>
                    </ul>
                  </li>
                  <li>
                    <span>留学归国：</span>
                    <ul class="radioBOX">
                      <li @click="toggle_liuxue_radio">
                        <i class="inlineBlockIcon radio" :class="{active:liuxue_radio}"></i>
                        <span>是</span>
                      </li>
                      <li @click="toggle_liuxue_radio">
                        <i class="inlineBlockIcon radio" :class="{active:!liuxue_radio}"></i>
                        <span>否</span>
                      </li>
                    </ul>
                  </li>
                </ul>
                <!--底部的按钮（通用）-->
                <div class="add_tankuang_btnBOX">
                  <button class="add_tankuang_btn add_tankuang_btn_first" @click="save">保存</button>
                  <button class="add_tankuang_btn" @click="cancelSave">取消</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!--删除确认框 -->
        <div class="tankuang_box" v-if="delISshow">
          <div class="tankuang">
            <p class="Common_files_tips_error">提示：删除此人员将会删除此人员关联的所有研发费用数据！</p>
            <p class="tankuangMSG">确认删除吗？</p>
            <div class="tankuang_btn_box">
              <button class="tankuang_ok_btn" @click="delBTN">确认</button>
              <button class="tankuang_ok_btn" @click="cancelDel">取消</button>
            </div>
          </div>
        </div>

        <!--文字弹框 -->
        <div class="tankuang_box" v-if="tankuangISshow">
          <div class="tankuang">
            <p class="tankuangMSG">{{tankuangMSG}}</p>
            <button class="tankuang_ok_btn" @click="tankuangISshowBTN">确认</button>
          </div>
        </div>

        <!--批量导入弹框-->
        <div class="tankuang_box tankuang_box_import" v-if="importBoxISshow">
          <div class="tankuang">
            <i class="iconfont icon-guanbi tankuang_box_import_closeBTN" @click="closeImportBox"></i>
            <p class="tankuangMSG">温馨提示</p>
            <p class="tankuang_box_importMSG">请下载统一的模版，并按相应的格式在Excel软件中填写您的业务数据，然后再导入到系统中。</p>
            <input type="file" class="common_import" name="staffs" @change="import_file($event)">
            <p v-if="import_error" class="import_error_msg">{{import_error_msg}}</p>
            <div class="tankuang_btn_box">
              <a class="common_import_ok_btn" href="http://fys.youledi.cn/excel/批量导入员工模板.xls">下载模板</a>
              <button class="common_import_cancel_btn" v-if="!comfirm_import">确定导入</button>
              <button class="common_import_ok_btn" v-if="comfirm_import" @click="comfirmImport($event)">确定导入</button>
            </div>
          </div>
        </div>

        <!--分页-->
        <ul class="pagination" >
          <li v-show="current != 1" @click="current-- && goto(current)" ><a href="#">上一页</a></li>
          <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
            <a href="#" >{{index}}</a>
          </li>
          <li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)"><a href="#" >下一页</a></li>
        </ul>
      </div>
    </section>
  </div>
</template>

<script>
  import Routers from '@/template/routers.vue'
  import Header from '@/template/common_header.vue'
  import VueDatepickerLocal from 'vue-datepicker-local'
  import { Toast } from 'mint-ui';
  export default {
    name: 'PeopleManagement',
    components: {
      Routers,
      Header,
      VueDatepickerLocal
    },
    data () {
      return {
        /*基本数据*/
        id:null,
        peopleLIST:[],
        name:'',
        sex_radio:true,
        birth:'',
        type:'',
        xueli:'',
        zhicheng:'',
        time:'',
        keji_radio:true,
        liuxue_radio:true,
        qianren_radio:true,
        waiji_radio:true,
        /***控制一些显示隐藏的东西***/
        propleIS_add:false,
        delISshow:false,
        tankuang_title:'',
        tankuangISshow:false,
        tankuangMSG:'',
        importBoxISshow:false,
        /****分页****/
        current:1,
        showItem:5,
        allpage:1,
        /***删除***/
        del_list:[],
        /****全选单选反选****/
        checked:false,
        checkList:[],
        /**批量导入**/
        importFile:'',
        comfirm_import:false,
        import_error:false,
        import_error_msg:''
      }
    },
    mounted: function() {
      this.axios.get('/index/staff_list?page=1').then((res)=>{
        if(res.data.code==1){
          this.peopleLIST = res.data.data
          this.allpage = res.data.last_page
        }
      })
    },
    computed:{
      pages:function(){
        let pag = [];
        if( this.current < this.showItem ){ //如果当前的激活的项 小于要显示的条数
          //总页数和要显示的条数那个大就显示多少条
          let i = Math.min(this.showItem,this.allpage);
          while(i){
            pag.unshift(i--);
          }
        }else{ //当前页数大于显示页数了
          let middle = this.current - Math.floor(this.showItem / 2 ),//从哪里开始
            i = this.showItem;
          if( middle >  (this.allpage - this.showItem)  ){
            middle = (this.allpage - this.showItem) + 1
          }
          while(i--){
            pag.push( middle++ );
          }
        }
        return pag
      }
    },
    watch: {//深度 watcher
      'checkList': {
        handler: function(val, oldVal) {
          if (val.length === this.peopleLIST.length) {
            this.checked = true;
          } else {
            this.checked = false;
          }
//          console.log(this.checkList);
        },
        deep: true
      }
    },
    methods: {
      /*分页*/
      goto (index) {
        this.current = index;
        //这里可以发送ajax请求
        this.axios.get('/index/staff_list?page='+this.current).then((res)=>{
          if(res.data.code==1){
            this.peopleLIST = res.data.data
            this.allpage = res.data.last_page
          }else{
            Toast(res.data.msg)
            return
          }
        })
      },
      /*基本操作*/
      add () {
        this.tankuang_title = '添加'
        this.propleIS_add = true
      },
      save () {
        if(!this.name||!this.birth||!this.type||!this.xueli||!this.zhicheng||!this.time){
          Toast('内容必须填写完整！！')
          return
        }
        let birthIndex = new Date(this.birth).toLocaleDateString().lastIndexOf('/')
        this.birth = new Date(this.birth).toLocaleDateString().replace(/\//ig,"-").slice(0,birthIndex)
        this.axios.post('/index/save_staff',{
          id:this.id||'',
          staff_name:this.name,
          staff_sex:this.sex_radio?0:1,
          staff_birth:this.birth,
          staff_type:this.type,
          staff_diploma:this.xueli,
          staff_title:this.zhicheng,
          work_time:new Date(this.time).toLocaleDateString().replace(/\//ig,"-"),
          is_tec:this.keji_radio?1:0,
          is_back:this.liuxue_radio?1:0,
          is_thou:this.qianren_radio?1:0,
          is_fore:this.waiji_radio?1:0
        }).then((res)=>{
          if(res.data.code==1){
            this.axios.get('/index/staff_list?page=1').then((res)=>{
              if(res.data.code==1){
                this.peopleLIST = res.data.data
                this.allpage = res.data.last_page
              }else{
                Toast(res.data.msg)
                return
              }
            })
            this.name = ''
            this.sex_radio = true
            this.birth = ''
            this.type = ''
            this.xueli = ''
            this.zhicheng = ''
            this.time = ''
            this.keji_radio = true
            this.liuxue_radio = true
            this.qianren_radio = true
            this.waiji_radio = true
            this.tankuang_title = ''
            this.id = null
          }else{
            Toast(res.data.msg)
            return
          }
        })
        this.propleIS_add = !this.propleIS_add
      },
      edit (id) {
        this.axios.get('/index/show_staff?id='+id).then((res)=>{
          if(res.data.code==1){
            let data = res.data.data
              this.name = data.staff_name
              this.sex_radio = data.staff_sex==0?true:false
              this.birth = data.staff_birth
              this.type = data.staff_type
              this.xueli = data.staff_diploma
              this.zhicheng = data.staff_title
              this.time = data.work_time
              this.keji_radio = data.is_tec==1?true:false
              this.liuxue_radio = data.is_back==1?true:false
              this.qianren_radio = data.is_thou==1?true:false
              this.waiji_radio = data.is_fore==1?true:false
              this.tankuang_title = '编辑'
              this.propleIS_add = true
              this.id = id
          }else{
            Toast(res.data.msg)
            return
          }
        })
      },
      /*删除*/
      del (id) {
        this.del_list = []
        this.del_list.push(id)
        this.delISshow = !this.delISshow
      },
      batchDel () {
        if(this.checkList.length<=0){
          this.tankuangMSG = '没有选择任何内容'
          this.tankuangISshow = !this.tankuangISshow
        }else{
          this.delISshow = !this.delISshow
        }
      },
      delBTN () {
        if(this.del_list.length>0){
          this.axios.post('/index/del_staff',{
            ids:JSON.stringify(this.del_list)
          }).then((res)=>{
            if(res.data.code==1){
              this.delISshow = !this.delISshow
              this.del_list = []
              this.axios.get('/index/staff_list?page='+this.current).then((res)=>{
                if(res.data.code==1){
                  this.peopleLIST = res.data.data
                  this.allpage = res.data.last_page
                }else{
                  Toast(res.data.msg)
                  return
                }
              })
            }else{
              Toast(res.data.msg)
              return
            }
          })
        }else{
          this.axios.post('/index/del_staff',{
            ids:JSON.stringify(this.checkList)
          }).then((res)=>{
            if(res.data.code==1){
              this.delISshow = !this.delISshow
              this.checkList = []
              this.checked = false
              this.axios.get('/index/staff_list?page='+this.current).then((res)=>{
                if(res.data.code==1){
                  this.peopleLIST = res.data.data
                  this.allpage = res.data.last_page
                }else{
                  Toast(res.data.msg)
                  return
                }
              })
            }else{
              Toast(res.data.msg)
              return
            }
          })
        }
      },
      /***全选*****/
      checkedAll () {
        let _this = this;
        if (!this.checked) {//实现全选
          _this.checkList = [];
          _this.peopleLIST.forEach(function(item) {
            _this.checkList.push(item.id);
          });
        }else{//实现反选
          _this.checkList = [];
        }
      },
      /*********/
      cancelSave () {
        this.propleIS_add = !this.propleIS_add
        this.name = ''
        this.sex_radio = true
        this.birth = ''
        this.type = ''
        this.xueli = ''
        this.zhicheng = ''
        this.time = ''
        this.keji_radio = true
        this.liuxue_radio = true
        this.qianren_radio = true
        this.waiji_radio = true
        this.tankuang_title = ''
        this.id = null
      },
      closeAddBox () {
        this.propleIS_add = !this.propleIS_add
        this.name = ''
        this.sex_radio = true
        this.birth = ''
        this.type = ''
        this.xueli = ''
        this.zhicheng = ''
        this.time = ''
        this.keji_radio = true
        this.liuxue_radio = true
        this.qianren_radio = true
        this.waiji_radio = true
        this.tankuang_title = ''
        this.id = null
      },
      toggle_sex_radio () {
        this.sex_radio = !this.sex_radio
      },
      toggle_keji_radio () {
        this.keji_radio = !this.keji_radio
      },
      toggle_waiji_radio () {
        this.waiji_radio = !this.waiji_radio
      },
      toggle_qianren_radio () {
        this.qianren_radio = !this.qianren_radio
      },
      toggle_liuxue_radio () {
        this.liuxue_radio = !this.liuxue_radio
      },
      cancelDel () {
        this.delISshow = !this.delISshow
      },
      /*控制文字弹框显示隐藏*/
      tankuangISshowBTN () {
        this.tankuangISshow = !this.tankuangISshow
      },
      /*批量导入*/
      imports(){
        this.importBoxISshow = !this.importBoxISshow
        this.importFile = ''
      },
      closeImportBox () {
        this.importBoxISshow = !this.importBoxISshow
        this.importFile = ''
        this.comfirm_import = false
      },
      comfirmImport (event) {
        this.axios.post('/index/import_staff',{
          staffs:this.importFile
        }).then((res)=>{
          if(res.data.code==0){
            this.import_error = true
            this.import_error_msg = res.data.msg
          }else{
            this.axios.get('/index/staff_list?page=1').then((res)=>{
              if(res.data.code==1){
                this.peopleLIST = res.data.data
                this.allpage = res.data.last_page
                this.importBoxISshow = !this.importBoxISshow
                this.importFile = ''
                this.comfirm_import = false
              }else{
                Toast(res.data.msg)
                return
              }
            })
          }
        })
      },
      import_file(e){
//        console.log(e.target.files)
        let file = e.target.files[0]
        let reader = new FileReader()
        reader.readAsDataURL(file)
        let _this = this
        reader.onload = function(e) {
          _this.importFile = this.result
          _this.comfirm_import = !_this.comfirm_import
        }

      }
    }
  }
</script>

<style scoped>
  @import '../../assets/public.css';
  @import '//at.alicdn.com/t/font_749860_je5eki3tevb.css';

  .add_tankuang{
    width:728px;
    height:500px;
  }
  .common_tankuang_content{
    padding:40px 0;
  }
  .common_tankuang_content>li{
    /*flex:1;*/
  }
  .common_tankuang_content span{
    width:110px;
  }
  .tankuang{
    width:300px;
    height:200px;
    padding:30px;
  }
  .Common_files_tips_error{
    text-align: left;
    margin-bottom:10px;
  }
  .tankuang_ok_btn{
    padding:6px 15px;
    font-size:16px;
    width:110px;
  }
  .tankuang_cancel_btn{
    padding:6px 15px;
    font-size:16px;
    width:110px;
  }
  .weiman{
    border: 1px solid #4797D4;
    border-radius: 4px;
    padding: 2px 3px;
    color: #4797D4;
    font-size:15px;
    margin-left:10px;
  }

</style>
